<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
	<title>工具管理-代码生成-数据项规则列表</title>
	<link th:href="${ctx}+'lib/jquery-layout/jquery.layout-latest.css'" rel="stylesheet"/>
</head>
<body class="gray-bg">
	<section class="section-content">
		<div class="row">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<div class="nav-tabs-custom">
						<ul class="nav nav-tabs">
							<li class="active"><a href="#tab-basic" data-toggle="tab" aria-expanded="true" onclick="changeForm('form-basic')">基本信息</a></li>
							<li><a href="#tab-columns" data-toggle="tab" aria-expanded="false" onclick="changeForm('form-columns')">字段信息</a></li>
							<li><a href="#tab-gen" data-toggle="tab" aria-expanded="false" onclick="changeForm('form-gen')">生成信息</a></li>
							<li class="pull-right"><i class="fa fa-cogs"></i></li>
						</ul>
						<div class="tab-content">
							<!-- 基本信息 -->
							<div class="tab-pane active" id="tab-basic">
								<form class="form-horizontal" id="form-basic">
									<input type="hidden" class="form-control" name="tableId" />
									<div class="form-group">
										<label class="col-sm-2 control-label">表名称：</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" name="tableName" maxlength="30" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">表描述：</label>
										<div class="col-sm-6">
											<textarea class="form-control" name="tableComment" autocomplete="off" rows="2" maxlength="512"></textarea>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">实体类名称：</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" name="className" maxlength="16" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">作者：</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" name="functionAuthor" maxlength="16" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">备注：</label>
										<div class="col-sm-6">
											<textarea class="form-control" name="remark" autocomplete="off" rows="2" maxlength="512"></textarea>
										</div>
									</div>
								</form>
							</div>

							<!-- 字段信息 -->
							<div class="tab-pane" id="tab-columns">
								<form class="form-horizontal" id="form-columns">
									<input type="hidden" class="form-control" name="tableId" />
									<input type="hidden" id="columnIndex" name="columnIndex"/>
									<div class="select-table table-striped" style="margin-top: 0px;padding-top: 0px;padding-bottom: 0px;">
										<table id="bootstrap-table" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
									</div>
								</form>
							</div>

							<!-- 生成信息 -->
							<div class="tab-pane" id="tab-gen">
								<form class="form-horizontal" id="form-gen">
									<input type="hidden" class="form-control" name="tableId" />
									<div class="form-group">
										<label class="col-sm-2 control-label">生成模板：</label>
										<div class="col-sm-6">
											<select name="tplCategory" class="form-control selectpicker" style="width: 150px">
												<option value="crud">单表（增删改查）</option>
												<option value="tree">树表（增删改查）</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label" title="java包路径，例如 com.piece.generator">生成包路径：<i class="fa fa-question-circle-o"></i></label>
										<div class="col-sm-6">
											<input type="text" class="form-control" name="packageName" maxlength="256" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label" title="子系统模块名，例如 generator">生成模块名：<i class="fa fa-question-circle-o"></i></label>
										<div class="col-sm-6">
											<input type="text" class="form-control" name="moduleName" maxlength="16" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label" title="业务类名，例如 genTable">生成业务名：<i class="fa fa-question-circle-o"></i></label>
										<div class="col-sm-6">
											<input type="text" class="form-control" name="businessName" maxlength="32" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label" title="用作类描述，例如 业务表:gen_table">生成功能名：<i class="fa fa-question-circle-o"></i></label>
										<div class="col-sm-6">
											<input type="text" class="form-control" name="functionName" maxlength="32" />
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="form-footer fixed" th:classappend="${readonly == true} ? 'hidden' : ''">
				<button type="button" class="btn btn-success form-submit" onclick="save()">保存</button>
				<button type="button" class="btn btn-default" onclick="closeWin()">关闭</button>
			</div>
		</div>
	</section>

	<div th:replace="/common/include :: footer"></div>
	<div th:replace="/common/include :: bootstrap-table-reorder-rows-js"></div>

	<script th:inline="javascript">
		var table_id = [[${id}]];
        var table_name = [[${tableName}]];
        var layer_index = [[${layer_index}]];
        var layer_callback = [[${layer_callback}]];
        var readonly = [[${readonly}]];
        var prefix = ctx + "api/system/generator";
        var dictColumnId = undefined;
        var form_id = "form-basic";

        var javaTypes = ["String","Integer","Long","Double","BigDecimal","Date"];
        var queryTypes = ["EQ","NEQ","GT","LT","GE","LE","LK","IN","NIN","EMP","NEMP","NULL","NNULL","BETWEEN"];
        var htmlTypes = ["input","textarea","select","radio","checkbox","datetime"];

        $(function() {
            initForm();
            initTable();
        });

        function changeForm(id) {
			form_id = id;
		}

		function initForm() {
			$.operate.get({
				url: prefix + '/loadTable/' + table_id,
				success: function(result) {
					if (result.code == 200) {
						$.form.load('form-basic', result.param);
						$.form.load('form-gen', result.param);
						$("input[name='tableId']").val(result.param.tableId);
					} else {
						$.modal.toast.error(result.msg, result.param);
						setTimeout(function () {
							window.location.href = ctx + result.code;
						}, 1500);
					}
				},
				error: function(result) {
					window.location.href = ctx + '500';
				}
			});
		}

		function initTable() {
			var options = {
				code: "columnId",
				url: prefix + "/loadColumn/" + table_id,
				sortName: "sort",
				sortOrder: "desc",
				search: false,
				showExport: false,
				sidePagination: 'client',
				pagination: false,
				fixedColumns: false,
				fixedRightNumber: 1,
				onReorderRow: onReorderRow,
				columns: [{
					title: "序号",
					field: "columnId",
					width: "45px",
					align: 'center',
					formatter: function (value, row, index) {
						// 编号隐藏域
						var columnIdHtml = $.common.printf('<input type="hidden" name="columns[%s].columnId" value="%s">', index, row.columnId);
						// 排序隐藏域
						var sortHtml = $.common.printf('<input type="hidden" name="columns[%s].sort" value="%s" id="columns_sort_%s">', index, row.sort, row.columnId);
						return columnIdHtml + sortHtml + $.table.serialNumber(index);
					},
					cellStyle: function(value, row, index) {
						return { css: { "cursor": "move" } };
					}
				}, {
					field: "columnName",
					title: "字段列名",
					width: "120px",
					class: "nodrag"
				}, {
					field: "columnComment",
					title: "字段描述",
					width: "150px",
					class: "nodrag",
					formatter: function (value, row, index) {
						var html = $.common.printf('<input class="form-control" type="text" name="columns[%s].columnComment" value="%s">', index, value);
						return html;
					}
				}, {
					field: "columnType",
					title: "物理类型",
					width: "80px",
					class: "nodrag",
					cellStyle: function(value, row, index) {
						return { css: { "cursor": "default" } };
					}
				}, {
					field: "javaType",
					title: "Java类型",
					width: "80px",
					class: "nodrag",
					formatter: function (value, row, index) {
						return $.common.render.select("columns[" + index + "].javaType", javaTypes, javaTypes, value);
					}
				}, {
					field: "javaField",
					title: "Java字段名",
					width: "80px",
					class: "nodrag",
					formatter: function (value, row, index) {
						var html = $.common.printf('<input class="form-control" type="text" name="columns[%s].javaField" value="%s" required>', index, value);
						return html;
					}
				}, {
					field: "isInsert",
					title: "插入",
					width: "40px",
					align: 'center',
					class: "nodrag bs-checkbox",
					formatter: function (value, row, index) {
						var isCheck = value == 0 ? "checked" : "";
						var html = $.common.printf('<label><input type="checkbox" name="columns[%s].isInsert" value="0" %s></label>', index, isCheck);
						return html;
					}
				}, {
					field: "isEdit",
					title: "编辑",
					width: "40px",
					align: 'center',
					class: "nodrag bs-checkbox",
					formatter: function (value, row, index) {
						var isCheck = value == 0 ? "checked" : "";
						var html = $.common.printf('<label><input type="checkbox" name="columns[%s].isEdit" value="0" %s></label>', index, isCheck);
						return html;
					}
				}, {
					field: "isList",
					title: "列表",
					width: "40px",
					align: 'center',
					class: "nodrag bs-checkbox",
					formatter: function (value, row, index) {
						var isCheck = value == 0 ? "checked" : "";
						var html = $.common.printf('<label><input type="checkbox" name="columns[%s].isList" value="0" %s></label>', index, isCheck);
						return html;
					}
				}, {
					field: "isQuery",
					title: "查询",
					width: "40px",
					align: 'center',
					class: "nodrag bs-checkbox",
					formatter: function (value, row, index) {
						var isCheck = value == 0 ? "checked" : "";
						var html = $.common.printf('<label><input type="checkbox" name="columns[%s].isQuery" value="0" %s></label>', index, isCheck);
						return html;
					}
				}, {
					field: "queryType",
					title: "查询方式",
					width: "80px",
					class: "nodrag",
					formatter: function (value, row, index) {
						var data = [{ index: index, queryType: value }];
						return $.common.render.select("columns[" + index + "].queryType", queryTypes, queryTypes, value);
					}
				}, {
					field: "isRequired",
					title: "必填",
					width: "40px",
					align: 'center',
					class: "nodrag bs-checkbox",
					formatter: function (value, row, index) {
						var isCheck = value == 0 ? "checked" : "";
						var html = $.common.printf('<label><input type="checkbox" name="columns[%s].isRequired" value="0" %s></label>', index, isCheck);
						return html;
					}
				}, {
					field: "htmlType",
					title: "显示类型",
					width: "80px",
					class: "nodrag",
					formatter: function (value, row, index) {
						var data = [{ index: index, htmlType: value }];
						return $.common.render.select("columns[" + index + "].htmlType", htmlTypes, htmlTypes, value);
					}
				}, {
					field: "dictType",
					title: "字典类型",
					width: "120px",
					class: "nodrag",
					formatter: function (value, row, index) {
						var html = $.common.printf('<input class="form-control" type="text" name="columns[%s].dictType" value="%s" id="columns_dict_%s"  readonly="readonly">', index, $.common.nullToStr(value), row.columnId);
						return '<div class="input-group" style="cursor: pointer"  onclick="selectDictTree(\'' + row.columnId + '\', this)">' + html + '<span class="input-group-addon input-sm"><i class="fa fa-search"></i></span></div>';
					}
				}, {
					title: "验证规则",
					align: "center",
					width: "80px",
					class: "nodrag",
					formatter: function(value, row, index) {
						var actions = [];
						actions.push('<a class="btn btn-sm btn-outline btn-primary ' + (readonly == true ? "hidden" : "") + '" href="#" onclick="editRule(\'' + row.columnId + '\',\'' + row.columnName + '\')"><i class="fa fa-edit"></i>配置</a>');
						return actions.join("");
					}
				}]
			};
			$.table.init("bootstrap-table", options);
		}

        // 当拖拽结束后处理函数
        function onReorderRow(data) {
            for (var i = 0; i < data.length; i++) {
                $("#columns_sort_" + data[i].columnId).val(i+1);
            }
        }

        // 选择字典处理函数
        function selectDictTree(columnId, obj) {
            dictColumnId = columnId;
            var dictCode = $.common.nullToStr($(obj).children().find("input").val());
            var url = ctx + "api/tool/dict/tree?single=single&dictGroup=group";
            if (dictCode) {
                url += "&dictCode=" + dictCode;
            }
            var options = {
                title: "选择字典类型",
                width: "380",
                content: url,
                btn: ["确定", "关闭"],
                yes: setDict,
                cancel: function(index) {
                    return true;
                }
            };
            $.modal.lay.openFrame(options);
        }

        function setDict(index, layero) {
            var iframeWin = window.top.window[layero.find("iframe")[0]["name"]];
            var dictCode = iframeWin.getCheckedNodeIds();
			$.modal.lay.close(index);
            $("#columns_dict_" + dictColumnId).val(dictCode);
        }

        function editRule(columnId, columnName) {
            var url = ctx + "api/tool/gen/rule?id=" + columnId + "&table=" + table_name + "&column=" + columnName;
            $.operate.edit({
                title: "配置[" + columnName + "]规则",
                content: url,
                shadeClose: true,
                _index: window.name
            });
		}

		function save() {
			$("#columnIndex").val("0");
			if (form_id == "form-columns") {
				// 获取总列数
				$("#columnIndex").val($.table.totalRowCount('bootstrap-table'));
			}

            // 加载参数数据
            var param = $.form.serialize(form_id);
            $.operate.post({
                url: prefix + "/saveColumn/" + table_id,
                data: param
            }, false, layer_index, layer_callback);
		}

        function closeWin() {
            $.modal.lay.close(layer_index);
        }
	</script>
</body>
</html>
